<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="item in arr">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        arr: ['a', 'b', 'c', 'd']
      },
      methods: {
        btnClick() {
          // 数组中哪些方法是响应式的
          // 1. push() 在数组的最后添加数据 是响应式的
          // this.arr.push('aaa');

          // 2. pop() 删除数组的最后一个数据 是响应式的
          // this.arr.pop();

          // 3. shift() 删除数组中的第一个数据 是响应式的
          // this.arr.shift();

          // 4. unshift() 在数组中的最前面添加数据, 是响应式的
          // this.arr.unshift("aaa");

          // 5. splice() 删除数组元素, 修改数组元素, 向数组插入元素 是响应式的
          // 这个方法一共有三或以上的参数, 第一个参数是从第几个索引号开始, 第二个参数是要修改多少个数据, 后面的参数是要插入或者要修改的参数
          // 删除数据, 第一个参数传入从第几个索引号开始删除, 第二个参数传入要删除的数据个数, 如果第二个参数不传入的话, 就是删除第一个参数往后的所有数据
          // this.arr.splice(0, 1);
          // 替换数据, 第一个参数传入从第几个索引号开始替换, 第二个参数传入要替换多少个数据, 后面的参数是要替换后的数据
          // this.arr.splice(0, 2, "aaa", "bbb");
          // 插入数据, 第一个参数传入从第一个索引号开始插入, 第二个参数传入0, 后面的参数是要插入的数据
          // this.arr.splice(0, 0, "aaa", "bbb")

          // 6. sort() 排列数组 参数是一个function 是响应式的
          // this.arr.sort();

          // 7. reverse() 翻转数组, 是响应式的
          // this.arr.reverse();

          // 注意: 修改数组中的数据不是响应式的!!!
          // this.arr[0] = "aaa";
          // 想要响应式
          Vue.set(this.arr, 0, "aaa");
        }
      }
    })
  </script>
</body>

</html>